<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Slider Visual Test : Slider option animate true</title>
	<link rel="stylesheet" href="../visual.css" type="text/css" />
	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
	<script type="text/javascript" src="../../../jquery-1.7.1.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>

	<style type="text/css">
	fieldset { padding: 1em; margin: 1em; }
	legend { font-size: 1.3em; font-family: monospace; font-weight: bold; }
	#slider1 { margin: 1em; }
	#slider2 { margin: 1em; height: 400px; }
	</style>
	
	<script type="text/javascript">
	$(function() {
		$("#slider1").slider({
			animate: true,
			step: 10
		});
		$("#slider2").slider({
			animate: true,
			orientation: 'vertical',
			step: 5,
			values: [5, 15, 35, 75]
		});
	});
	</script>
</head>
<body>

<fieldset>
	<legend>$("#slider1").slider({
			animate: true,
			step: 10
		});</legend>
<div id="slider1"></div>
<button onclick="$('#slider1').slider('value', 15);">method value: 15</button>
<button onclick="$('#slider1').slider('value', 75);">method value: 75</button>
<button onclick="$('#slider1').slider('option', 'value', 25);">option value: 25</button>
<button onclick="$('#slider1').slider('option', 'value', 85);">option value: 85</button>
</fieldset>

<fieldset>
	<legend>$("#slider2").slider({
			animate: true,
			orientation: 'vertical',
			step: 5,
			values: [5, 15, 35, 75]
		});</legend>
<div id="slider2"></div>
<button onclick="$('#slider2').slider('values', [10, 20, 30, 40]);">method values: [10, 20, 30, 40]</button>
<button onclick="$('#slider2').slider('values', [80, 70, 60, 50]);">method values: [80, 70, 60, 50]</button>
<button onclick="$('#slider2').slider('option', 'values', [20, 30, 40, 50]);">option values: [20, 30, 40, 50]</button>
<button onclick="$('#slider2').slider('option', 'values', [90, 80, 70, 60]);">option values: [90, 80, 70, 60]</button>
</fieldset>

</body>
</html>
